<template>
  <view class="content">
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view class="homepage_box">
      <image
        class="homepage_image"
        mode="aspectFit"
        src="@/static/login/bg.png"
      ></image>
    </view>
    <image src="@/static/image/indexbg.jpg" class="bg-img"></image>
    <button class="enter" @click="handleEnter">点击进入</button>
  </view>
</template>

<script>
import { getToken } from "@/api/login.js";
export default {
  data() {
    return {
      title: "咸丰县",
    };
  },
  onLoad() {},
  methods: {
    handleEnter() {
      uni.showLoading({
        title: "登录中",
      });
      wx.login({
        success(res) {
          console.log(res.code);
          if (res.code) {
            //发起网络请求
            getToken({
              jsCode: res.code,
            })
              .then((response) => {
                uni.hideLoading();
                uni.setStorageSync("token", response.data.data.token);
                uni.setStorageSync("openid", response.data.data.user.openid);
                uni.switchTab({
                  url: "/pages/home/home",
                });
              })
              .catch((res) => {
                uni.hideLoading();
              });
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 150rpx;
}

.logo {
  width: 200rpx;
  height: 300rpx;
}

.homepage_box {
  z-index: 1;
  //height: 60vh;
  margin-bottom: 40rpx;
}

.homepage_image {
  width: 60vw;
  height: 50vh;
  //margin-left: 15vw;
}

.text-area {
  //文字渐变
  background-image: -webkit-gradient(
    linear,
    0 0,
    0 bottom,
    from(rgba(219, 149, 92, 1)),
    to(rgba(247, 232, 173, 1))
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
  font-size: 48rpx;
  font-weight: 600;
  align-self: flex-start;
  margin: 0 0 100rpx 40rpx;
}

.bg-img {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

.enter {
  width: 392rpx;
  height: 70rpx;
  border-radius: 70rpx;
  color: #ff0000;
  line-height: 70rpx;
  font-weight: 400;
}
</style>
